import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
import { config, withDesign } from 'storybook-addon-designs'
import { action } from '@storybook/addon-actions'
import { useArgs } from '@storybook/client-api'

import RadioGroup from '@baserow/modules/core/components/RadioGroup'

<Meta
    title="Baserow/Form Elements/Radio/RadioGroup"
    component={RadioGroup}
    parameters={{
        backgrounds: {
            default: 'white',
            values: [
                { name: 'white', value: '#ffffff' },
                { name: 'light', value: '#eeeeee' },
                { name: 'dark', value: '#222222' },
            ],
        },
    }}
    decorators={[
        withDesign,
        (story, context) => {
            const [_, updateArgs] = useArgs()
            return story({ ...context, updateArgs })
        },
    ]}
    argTypes={{
        type: {
            control: {
                type: 'select',
                options: ['radio', 'button'],
            },
            defaultValue: 'radio',
        },
        options: {
            control: {
                type: 'object',
            },
            defaultValue: [
                { label: 'Option 1', value: 'option1' },
                { label: 'Option 2', value: 'option2' },
                { label: 'Option 3', value: 'option3' },
                { label: 'Option 4', value: 'option4', loading: true },
                { label: 'Option 5', value: 'option4', disabled: true },
            ],
        },
        modelValue: {
            control: {
                type: 'text',
            },
            defaultValue: 'option1',
        },
        verticalLayout: {
            control: {
                type: 'boolean',
                options: [true, false],
            },
            defaultValue: false,
        },
    }}
/>

# RadioGroup

The radio group component is used to display a group of radio buttons. The user can select one of the options.

export const Template = (args, { argTypes, updateArgs }) => ({
    methods: {
        action,
        handleInput(value) {
            const modelValue = value
            updateArgs({ ...args, modelValue })
            action('handleInput')(modelValue)
        },
    },
    components: { RadioGroup },
    props: Object.keys(argTypes),
    template: `<RadioGroup v-bind="$props" @input="handleInput">${args.default}</RadioGroup>`,
})

export const designConfig = {
    type: 'figma',
    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?node-id=53%3A1852&mode=dev',
}

<Canvas>
    <Story
        name="RadioGroup"
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<RadioGroup :options="radioOptions" v-model="myModel"></RadioGroup>
```

## Props

<Props of={Radio} />
